<template>
  <section id="foot_guide">
    <van-tabbar v-model="active" route active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item v-for="tab in menus" :key="tab.icon" :to="{ path: tab.route }" replace :icon="tab.icon" :name="tab.name">{{ tab.name }}</van-tabbar-item>
    </van-tabbar>
  </section>
</template>

<script>
import menus from '~/config/menu.js'
export default {
  name: 'FooterBar',
  data() {
    return {
      menus: menus,
      active: '我的'
    }
  }
}
</script>

<style lang="scss" scoped>
#foot_guide{
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: -1px;
  @include wh(100%, 50px);
  display: flex;
  justify-content:flex-start;
  align-items: center;
  z-index: 9999999;
  overflow:hidden;
  // box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
  .guide_item{
    flex: 1;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    .icon_style{
      @include wh(25px, 25px);
      margin-top: 3px;
      fill: #ccc;
    }
    span{
      @include sc(16px, #666);
    }
  }
  .active {
    color:#3190e8;
    .icon_style{
      fill: #3190e8;
    }
  }
  a {
    font-size:14px;
  }
}
</style>
